<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
    DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。
    它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如对元素增删内容）<br>
    浏览器会根据DOM模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构(DOM Tree)。
    所有的节点和最终的树状结构，都有规范的对外接口。<br>
    DOM只是一个接口规范，可以用各种语言实现。所以严格地说，DOM不是JavaScript语法的一部分，但是
    DOM操作是JavaScript最常见的任务，离开了DOM,JavaScript就无法控制网页。另一方面，JavaScript也是最常用于DOM操作的语言。
    <br><b>节点</b>
    <br>
    DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。
    每个节点可以看作是文档树的一片叶子。
    <br><b><i>结点的类型有七种</i></b>
    <br>Document  :整个文档树的顶层节点
    <br>DocumentType  :doctype标签
    <br>Element  :网页的各种HTML标签
    <br>Attribute  :网页元素的属性（比如class="right"）
    <br>Text  :标签之间或标签包含的文本
    <br>Comment  :注释
    <br>DocumentFragment  :文档的片段
    <br><b>节点树</b>
    <br>一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。
    它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。
    <br><i>浏览器原生提供document节点，代表整个文档</i>
    <br><b>除了根节点，其他节点都有三种层级关系</b>
    <br>父节点关系（parentNode）:直接的那个上级节点
    <br>子节点关系（childNodes）:直接的下级节点
    <br>同级节点关系（sibling）：拥有同一个父节点的节点
    <br><b>Node.nodeType属性</b>
    <br><i>不同节点的nodeType属性值和对应的常量如下</i>
    <br>文档节点(document):9,对应常量Node.DOCUMENT_NODE
    <br>元素节点(element):1,对应常量Node.ELEMENT_NODE
    <br>属性节点(attr):2,对应常量Node.ATTRIBUTE_NODE
    <br>文本节点(text):3,对应常量Node.TEXT_NODE
    <br>文档片断节点(DocumentFragment):11,对应常量Node.DOCUMENT_FRAGMENT_NODE
    </p>
    <script>
        console.log(document);

        if(document.nodeType===9){
            console.log("顶层节点");
            
        }
        
    </script>
</body>
</html>